<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--自定义导航栏-->
    <u-navbar
      title="客服"
      leftIcon=""
      :placeholder="true"
      bgColor="#F2F2F2"
      :autoBack="false"
    >
      <view class="" slot="right" v-if="false"
        ><u-icon name="search" color="#333333" size="48"></u-icon
      ></view>
      <view class="mr-1.5" slot="right" @click="isShow = !isShow">
        <u-icon name="plus-circle" color="#333333" size="42"></u-icon>
      </view>
    </u-navbar>
    <!--创建待办-->
    <view class="fixed right-2.5 z-20" v-if="isShow">
      <view class="moreBox rounded w-24 relative">
        <view
          class="diy-triangle-up absolute right-3.5"
          style="top: -14rpx"
        ></view>
        <view
          class="text-center text-sm text-white leading-8"
          @click="goTo('schedule-add')"
          >人工客服</view
        ></view
      >
    </view>
    <u-notice-bar
      v-if="notice.isOpen"
      :text="notice.title"
      fontSize="28rpx"
      bgColor="#FFEDF0"
      color="#696969"
      @click="goTo('system-messages')"
    ></u-notice-bar>
    <view class="ml-4">
      <view
        class="flex items-center"
        v-if="user.imServer == '1' && false"
        @click="onChat()"
      >
        <view class="">
          <image class="w-12 h-12" src="/static/icons/kefuHeadimg.png" />
        </view>
        <view class="flex justify-between ml-3 border-b-gray w-full py-2.5">
          <view class="w-full">
            <view class="text-sm text-dark font-medium leading-7"
              >客服丽丽 9:00-23:00</view
            >
            <view class="text-xs text-darkNormal leading-6 truncate w-3/4"
              >我是客服丽丽华丽登场，噔噔蹬蹬噔噔蹬蹬噔噔蹬蹬噔噔蹬蹬噔噔蹬蹬噔噔蹬蹬</view
            >
          </view>
          <view class="text-xs text-light leading-7 mr-4">昨天</view>
        </view>
      </view>
      <view class="flex items-center">
        <view class="">
          <image class="w-12 h-12" src="/static/icons/kefuHeadimg.png" />
        </view>
        <view
          class="flex justify-between ml-3 border-b-gray w-full py-2.5"
          @click="goTo('schedule-messages')"
        >
          <view class="">
            <view class="text-sm text-dark font-medium leading-7"
              >人工客服小美</view
            >
            <view class="text-xs text-darkNormal leading-6 h-6">&nbsp;</view>
          </view>
          <view class="text-xs text-light leading-7 mr-4" v-if="false">{{
            myData.lastMsgTime
          }}</view>
        </view>
      </view>
      <view class="flex items-center">
        <view class="relative">
          <u-badge
            :isDot="true"
            type="success"
            bgColor="#FF0000"
            class="absolute -right-0.5 -top-0.5 z-10"
            v-if="false"
          ></u-badge>
          <image class="w-12 h-12" src="/static/icons/icon-customer-nav2.png" />
        </view>
        <view
          class="flex justify-between ml-3 border-b-gray w-full py-2.5"
          @click="goTo('system-messages')"
        >
          <view class="">
            <view class="text-sm text-dark font-medium leading-7"
              >平台公告</view
            >
            <view class="text-xs text-darkNormal leading-6 h-6">&nbsp;</view>
          </view>
          <view class="text-xs text-light leading-7 mr-4"></view>
        </view>
      </view>
      <view class="flex items-center">
        <view class="">
          <image class="w-12 h-12" src="/static/icons/icon-customer-nav3.png" />
        </view>
        <view
          class="flex justify-between ml-3 border-b-gray w-full py-2.5"
          @click="goTo('common-question')"
        >
          <view class="">
            <view class="text-sm text-dark font-medium leading-7"
              >常见问题</view
            >
            <view class="text-xs text-darkNormal leading-6 h-6">&nbsp;</view>
          </view>
          <view class="text-xs text-darkNormal"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import {
  getTopNotice,
  getUnreadMsg,
} from '../../package-customer/services/customer';

export default {
  data() {
    return {
      isShow: false,
      myData: {
        expire: '',
        mark: false,
        unreadCount: '',
        lastMsgTime: '',
      },
      notice: {
        title: '',
        isOpen: 0,
      },
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  async onPullDownRefresh() {
    await Promise.allSettled([this._getUnreadMsg()]);
    uni.stopPullDownRefresh();
  },
  async created() {
    // 发送网络请求
    // uni.request({
    //   url: 'http://103.205.252.23:7788/test/app',
    //   success: function (res) {
    //     // 请求成功，说明已连接外网
    //     console.log('已连接外网http://103.205.252.23:7788/test/app');
    //   },
    //   fail: function (res) {
    //     // 请求失败，说明未连接外网
    //     console.log('未连接外网http://103.205.252.23:7788/test/app');
    //   },
    // });
    this.$store.dispatch('getUser').then(() => {
      this._getUnreadMsg();
      this._getTopNotice();
    });
  },
  methods: {
    //置顶公告展示
    async _getTopNotice() {
      const { code, data } = await getTopNotice();
      if (code != 200) return;
      this.notice = data;
    },
    //是否被标记
    async _getUnreadMsg() {
      const { code, data } = await getUnreadMsg();
      if (code != 200) return;
      this.myData = data;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //前往客服IM聊天系统
    onChat() {
      let params = {
        token: uni.getStorageSync('tokenBuy' + process.env.VUE_APP_PLATFORMID),
        platformId: process.env.VUE_APP_PLATFORMID,
        userType: 'buy',
        userId: 0,
      };
      //console.log(params);
      if (process.env.NODE_ENV === 'development') {
        window.open('http://192.168.10.42:8082', JSON.stringify(params));
      } else {
        console.log(this.$store.state.user.bimAddress);
        window.open(
          this.$store.state.user.bimAddress + '/chatPC',
          JSON.stringify(params)
        );
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .u-notice__left-icon span {
  font-size: 18px !important;
}
</style>
